<template>
<div style="display:flex">
    <el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in leftBookdata" :key="item.value" :label="item.catalog" :name="item.id" >
            <div class="box-card">
                <el-card shadow="always" v-for="(item, index) in bookData" :key="index" class="card">
                    <div class="book-img">
                        <img :src="item.img" class="image" onerror="javascript:this.src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1432406361,4243013259&fm=26&gp=0.jpg'">
                    </div>
                    <div class="book-content">
                        <div class="one-title">{{ '《'+item.title +'》'}}</div>
                        <div class="two-time">出版日期：{{item.bytime}}</div>
                        <div class="three-cent"><div class="yuedu">{{item.reading}}</div><el-button type="text" class="button" @click="toContent(index)">详细内容</el-button></div>
                    </div>
                </el-card>
            </div>
            <div class="page-box">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
                </el-pagination>
            </div>
        </el-tab-pane>
    </el-tabs>
</div>
  
  
</template>

<script>
export default {
    data() {
        return {
            bookid:null,
            bookData:[],
            activeName: '242',
            tabPosition: 'left',
            leftBookdata: [
        {
            "id": "242",
            "catalog": "中国文学"
        },
        {
            "id": "252",
            "catalog": "人物传记"
        },
        {
            "id": "244",
            "catalog": "儿童文学"
        },
        {
            "id": "248",
            "catalog": "历史"
        },
        {
            "id": "257",
            "catalog": "哲学"
        },
        {
            "id": "243",
            "catalog": "外国文学"
        },
        {
            "id": "247",
            "catalog": "小说"
        },
        {
            "id": "251",
            "catalog": "心灵鸡汤"
        },
        {
            "id": "253",
            "catalog": "心理学"
        },
        {
            "id": "250",
            "catalog": "成功励志"
        },
        {
            "id": "249",
            "catalog": "教育"
        },
        {
            "id": "245",
            "catalog": "散文"
        },
        {
            "id": "256",
            "catalog": "理财"
        },
        {
            "id": "254",
            "catalog": "管理"
        },
        {
            "id": "246",
            "catalog": "经典名著"
        },
        {
            "id": "255",
            "catalog": "经济"
        },
        {
            "id": "258",
            "catalog": "计算机"
        }
    ]
        }
    },
    mounted(){
        let data = {
            rn: 10,
            rn: 10, //返回条数
            key: '0b925a34324bbd8c31915b4288e7141a',
            catalog_id: this.activeName
        }
        this.getList(data)
    },
    methods: {
      handleClick(tab, event) {
        this.bookid =tab.name
        let id= tab.name //http://apis.juhe.cn/goodbook/query?key=你申请的key&catalog_id=246&rn=10&rn=10
        let data = {
            rn: 10,
            rn: 10, //返回条数
            key: '0b925a34324bbd8c31915b4288e7141a',
            catalog_id: id
        }
        this.getList(data)
      },
      getList(data){
             this.$axios.post('/apiin','/goodbook/query',data).then(res=>{
                    this.bookData = res.result.data
                 })
        },
        toContent(index){
            console.log(index)
            this.$router.push({
                path:'/TUSHU/xiangqing',
                query: {
                    index: index,
                    id: this.bookid
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
  .wenzi {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }
  .box-card{
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
  }
  .card{
    width: 17.5%;
    margin: 0 0.5%;
    margin-bottom: 20px;
  }
  .book-img{
    // width: 150px;
    height: 200px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
  }
  .image{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    // .card:not(:nth-child(1)) { margin-left: 1%; margin-right: 1%;}
    .book-content{
        line-height: 26px;
        .one-title{
            text-align: center;
        }
        .two-time{
            text-align: left;
        }
        .yuedu{
            text-align: left;
            color: #999;
        }
    }
    .three-cent{
        display: flex;
        justify-content: space-between;
    }
</style>